<template>
    <n-form
        :model="model"
        size="medium"
        ref="queryFromRef"
        label-width="110px"
        label-placement="left"
        require-mark-placement="right-hanging"
        :show-feedback="false"
    >
        <NGrid :x-gap="16" :y-gap="16" cols="12" item-responsive responsive="screen">
            <NFormItemGi span="12 s:12 m:6 l:6 xl:4 xxl:3" label="部门名称：" path="name">
                <n-input v-model:value="model.name" :maxlength="50" clearable placeholder="部门名称" :allow-input="(value) => !value.includes(' ')" />
            </NFormItemGi>
            <NFormItemGi span="12 s:12 m:6 l:6 xl:4 xxl:3">
                <NSpace class="w-full" justify="end">
                    <NButton @click="query" type="primary">搜索</NButton>
                    <NButton @click="reset">重置</NButton>
                </NSpace>
            </NFormItemGi>
        </NGrid>
    </n-form>
</template>

<script setup lang="ts">
import {Api} from '@/api/type'
import {NButton, NForm, NFormItemGi, NGrid, NInput, NSpace} from 'naive-ui'

const emit = defineEmits<{
    (e: 'reset'): void;
    (e: 'query'): void;
}>()

const model = defineModel<Partial<Api.System.Dept>>('model', {
    required: true
})

async function reset() {
    emit('reset')
}

async function query() {
    emit('query')
}
</script>
